
<template>
  <div class="roleTree">
    <addHeader :title="'角色管理'" :btnName="'新增角色'" @click="goAdd"></addHeader>
    <div class="treeBody">
      <el-tree :data="treeData" :props="defaultProps" :default-expand-all="true" @node-click="handleNodeClick">
      </el-tree>
    </div>
    <el-dialog title="新增" :visible.sync="dialogVisible" :destroy-on-close="true" :close-on-click-modal="false"
      width="500px">
      <roleForm ref="roleForm"></roleForm>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRole">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import addHeader from "../../common/addHeader";
import roleForm from "./roleForm";
export default {
  name: "roleTree",
  components: {
    addHeader,
    roleForm,
  },
  data() {
    return {
      dialogVisible: false,
      treeData: [],
      defaultProps: {
        children: "childRolesTreeVOS",
        label: "name",
      },
    };
  },
  mounted() {
    this.getRolesTree();
  },
  methods: {
    goAdd() {
      this.dialogVisible = true;
    },
    addRole() {
      this.$refs.roleForm.validate().then((res) => {
        let params = {
          icon: this.$refs.roleForm.form.icon,
          name: this.$refs.roleForm.form.name,
          parentId: this.$refs.roleForm.form.parentId,
          roleExtent: this.$refs.roleForm.form.roleExtent,
        };
        this.$api.addRoles(params).then((res) => {
          this.$message.success("新增成功");
          this.dialogVisible = false;
          this.getRolesTree();
          this.$emit("after-add");
        });
      });
    },
    getRolesTree() {
      this.$api.getRolesTree().then((res) => {
        this.treeData = [res.data];
      });
    },
    handleNodeClick(data) {
      this.$emit("handleNodeClick", data);
    },
  },
};
</script>

<style scoped lang="less">
.el-tree {
  background-color: transparent;
}

.roleTree {
  width: 200px;
  height: 100%;

  border-right: 1px solid #eee;
  .treeBody {
    width: 100%;
    height: calc(100% - 49px);
    background-color: #fafafa;
    overflow-y: auto;
  }
}
</style>